<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Editor Custom Plugin Test/Tutorial</title>

	<style type="text/css">
		@import "../../dojo/resources/dojo.css";
		@import "../css/dijitTests.css";
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css">

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"
		djConfig="parseOnLoad: true, isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="../_testCommon.js"></script>

	<style>
		.customIconHtmlToggle {
			background-image: url('customIcon.gif'); /* custom editor icons sprite image */
			background-repeat: no-repeat;
			width: 18px;
			height: 18px;
			text-align: center;
		}
	</style>

	<script type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.Editor");
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them

		dojo.require("dijit._Widget");
		dojo.require("dijit._Templated");
		dojo.require("dijit._editor._Plugin");
		dojo.require("dojo.string");

		dojo.declare("MyPlugin",
			dijit._editor._Plugin,
			{
				buttonClass: dijit.form.ToggleButton,
				useDefaultCommand: false,

				_initButton: function(){
					this.command = "htmlToggle";
					this.editor.commands[this.command] = "View HTML source"; // note: should be localized
					this.iconClassPrefix = "customIcon";
					this.inherited(arguments);
					delete this.command; // kludge so setEditor doesn't make the button invisible
					this.connect(this.button, "onClick", this._toggleSource);
				},

				destroy: function(f){
					this.inherited(arguments);
					if(this.sourceArea){ dojo.destroy(this.sourceArea); }
				},

				_toggleSource: function(){
					this.source = !this.source;
					if(!this.sourceArea){
						this.sourceArea = dojo.doc.createElement('textarea');
						this.sourceArea.style.position = 'absolute';
						dojo.place(this.sourceArea, this.editor.domNode, "last");
					}
					if(this.source){
						this.sourceArea.value = this.editor.getValue();
						dojo.marginBox(this.sourceArea, dojo.marginBox(this.editor.editingArea));
					}else{
						this.editor.setValue(this.sourceArea.value);
						this.sourceArea.style.top = "-999px";
					}

					this.editor.attr('disabled', this.source); // conditionally disable toolbar -- FIXME. Doesn't work.
					this.button.attr('label', this.source ? "View WYSIWYG" : this.editor.commands[this.command]); // note: should be localized
				}
			}
		);

		/* the following code registers my plugin */
		dojo.subscribe(dijit._scopeName + ".Editor.getPlugin",null,function(o){
			if(o.plugin){ return; }
			if(o.args.name == "MyPlugin"){
				return new MyPlugin({});
			}
		});
	</script>
</head>
<body class="tundra">
	<div dojoType="dijit.Editor" id="editor1" extraPlugins="['MyPlugin']"><p>
	This editor should have my custom plugin
	</p></div>
</body>
</html>